<template>
  <!-- 实现图片移动 -->
    <div class="image-container" ref="imageContainer" @wheel="zoomImage" @mousedown="startDrag" @mousemove="dragImage" @mouseup="endDrag">
      <img :src="imageSrc" :style="imageStyle" alt="Image">
    </div>
  </template>

<script>
export default {
  data () {
    return {
      imageSrc: require('@/assets/YiJin8/易经卷一1.png'), // 图片地址
      zoom: 1, // 初始缩放比例
      offsetX: 0, // 初始 X 偏移
      offsetY: 0, // 初始 Y 偏移
      dragging: false,
      lastX: 0,
      lastY: 0
    }
  },
  computed: {
    imageStyle () {
      // 计算图片的样式，包括缩放和拖动
      return {
        transform: `scale(${this.zoom}) translate(${this.offsetX}px, ${this.offsetY}px)`,
        cursor: this.dragging ? 'grabbing' : 'grab'
      }
    }
  },
  methods: {
    zoomImage (event) {
      // 放大缩小图片
      if (event.deltaY > 0) {
        this.zoom -= 0.1
      } else {
        this.zoom += 0.1
      }
    },
    startDrag (event) {
      // 鼠标按下时，开始拖动
      this.dragging = true
      this.lastX = event.clientX
      this.lastY = event.clientY
    },
    dragImage (event) {
      if (this.dragging) {
        // 拖动图片
        this.offsetX += event.clientX - this.lastX
        this.offsetY += event.clientY - this.lastY
        this.lastX = event.clientX
        this.lastY = event.clientY
      }
    },
    endDrag () {
      // 鼠标松开时，停止拖动
      this.dragging = false
    }
  }
}
</script>

  <style scoped>
  .image-container {
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    cursor: grab; /* 鼠标指针样式为 'grab' */
    cursor: -webkit-grab; /* 兼容 Webkit 浏览器 */
  }

  .image-container:active {
    cursor: grabbing; /* 鼠标按下时的指针样式为 'grabbing' */
    cursor: -webkit-grabbing; /* 兼容 Webkit 浏览器 */
  }

  .image-container img {
    /* user-drag: none; */
    user-select: none;
  }
  </style>
